<template>
  <div class="document-pending">
    <div class="document-main">
      <div class="head-row">
        <div class="left">
          <img src="@/assets/dashboard/myPending/close.png" alt="" @click="close">
          <span class="title">{{ nowData.title }}</span>
          <div class="official-time" v-if="officialTime>0">{{ officialTime }}s</div>
        </div>
        <div class="right">
          <div class="attachment-btn" @click="showAttachmentModal=!showAttachmentModal">
            <span class="text">附件</span>
            <div class="img1"></div>
            <div class="count-badge">{{ nowData.docAddFiles.length || 0 }}</div>
            <attachment-modal
              v-if="showAttachmentModal"
              :file-list="nowData.docAddFiles"
            ></attachment-modal>
          </div>
          <div class="download-btn" @click="downloadDocument">
            <div class="img2"></div>
            <span class="text">下载公文</span>
          </div>
        </div>
      </div>
      <div class="content-row">
        <template v-if="nowData.docImgPath">
          <img :src="nowData.docImgPath" alt="" class="img-file-path">
        </template>
      </div>
      <div class="footer-row">
        <div class="prev-link" @click="toPrev">
          <span class="text">上一条</span>
          <div class="divider"></div>
          <span class="title">{{ nowData.prev ? nowData.prev.title : '无' }}</span>
        </div>
        <div class="next-link" @click="toNext">
          <span class="title">{{ nowData.next ? nowData.next.title : '无' }}</span>
          <div class="divider"></div>
          <span class="text">下一条</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex"
import attachmentModal from "./attachmentModal.vue";
export default {
  components: {
    attachmentModal
  },
  name: "",
  props: {
    documentData: {
      type: Object,
      default: {}
    },
  },
  data() {
    return {
      nowData: {
        title: '',
        docAddFiles: [],
        docImgPath: '',
        docPdfId: '',
        prev: null,
        next: null,
      },
      officialTime: 5,
      showAttachmentModal: false
    }
  },
  computed: {
    // docAddFiles(){
    //   return (this.nowData.docAddFiles||'').split(',')
    // },
  },
  mounted() {
    //this.nowData = this.documentData
    this.loadDocument()
  },
  beforeDestroy() {
    clearInterval(window.lookOfficialInterval);
  },
  methods: {
    close() {
      this.$emit('close')
    },
    //加载公文
    loadDocument() {
      this.nowData = {
        title: '盛辉[2023]人10号',
        docImgPath: 'http://59.56.179.58:8082/office/out/downLoad/163595',
        docPdfId: '163596',
        docAddFiles: [
          {
            fileId: '1',
            fileName: '雇外车使用守则.docx',
            size: 20,
          },
          {
            fileId: '1',
            fileName: '附件.xlsx',
            size: 35,
          },
          {
            fileId: '1',
            fileName: '附件的名字啊啊啊啊啊啊啊.zip',
            size: 445,
          },
          {
            fileId: '1',
            fileName: '相关图片.jpg',
            size: 233,
          },
        ],
        prev: null,
        next: {
          title: '盛辉[2023]人09号',
        },
      }
      this.officialTime = 5
      if(window.lookOfficialInterval){
        clearInterval(window.lookOfficialInterval)
      }
      window.lookOfficialInterval = setInterval(() => {
        --this.officialTime
        if (this.officialTime < 1) {
          this.officialTime = 0
          if(window.lookOfficialInterval){
            clearInterval(window.lookOfficialInterval)
          }
        }
      }, 1000)
    },
    //下载公文
    downloadDocument(){
      console.log(`${this.$store.state.url_official}office/out/downLoad/${this.nowData.docPdfId}`)
      if(this.nowData.docPdfId){
        //window.location.href = `${this.$store.state.url_official}office/out/downLoad/${this.nowData.docPdfId}`
        window.location.href = `http://59.56.179.58:8082/office/out/downLoad/${this.nowData.docPdfId}`  //暂时先用线上地址
      }
    },
    //上一条下一条
    toPrev(){
      if(!this.nowData.prev){
        return this.$showMsg('没有上一条了','warning')
      }
    },
    toNext(){
      if(!this.nowData.next){
        return this.$showMsg('没有下一条了','warning')
      }
    },
  },
};
</script>
<style lang="less" scoped>
@textColor: #1f1e1d;
@ntalkColor: #e67529;
@keyframes document-move-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
.document-pending {
  position: fixed;
  width: calc(100% - 56px);
  height: calc(100vh - 40px);
  top: 40px;
  right: 0;
  box-sizing: border-box;
  background-color: rgba(0,0,0,0.45);
  z-index: 110000;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}
.document-main {
  width: calc(100% - 44px);
  height: 100%;
  background-color: #fff;
  //animation: document-move-in 0.5s;
  transform: translateX(0);
  .head-row {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f2f3f6;
    box-sizing: border-box;
    padding: 0 24px;
    .left {
      display: flex;
      align-items: center;
      img {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
      .title {
        margin-left: 16px;
        color: @textColor;
        font-size: 16px;
        line-height: 24px;
      }
      .official-time {
        width: 32px;
        height: 24px;
        border: 1px solid #ffbd91;
        background-color: #fff0e6;
        color: #e67529;
        text-align: center;
        border-radius: 13px;
        margin-left: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
      }
    }
    .right {
      display: flex;
      align-items: center;
      .attachment-btn, .download-btn {
        margin-left: 16px;
        display: flex;
        align-items: center;
        padding: 5px 16px;
        border: 1px solid #cecece;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        &:hover {
          border: 1px solid @ntalkColor;
          .text { color: @ntalkColor; }
          .img1 {
            background-image: url('~@/assets/dashboard/myPending/arrow1.png');
          }
          .img2 {
            background-image: url('~@/assets/dashboard/myPending/download1.png');
          }
        }
        .text {
          font-size: 14px;
          line-height: 22px;
          color: @textColor;
        }
        .img1 {
          margin-left: 8px;
          width: 16px;
          height: 16px;
          background-size: 100% 100%;
          background-image: url('~@/assets/dashboard/myPending/arrow.png');
        }
        .img2 {
          margin-right: 8px;
          width: 16px;
          height: 16px;
          background-size: 100% 100%;
          background-image: url('~@/assets/dashboard/myPending/download.png');
        }
        .count-badge {
          position: absolute;
          right: 0;
          top: -4px;
          transform: translateX(calc(100% - 12px));
          height: 16px;
          line-height: 16px;
          width: fit-content;
          border-radius: 8px;
          padding: 0 4px;
          color: #fff;
          background-color: #ff4040;
          font-size: 12px;
        }
      }
    }
  }
  .content-row {
    width: 100%;
    height: calc(100% - 128px);
    overflow-y: auto;
    .img-file-path {
      width: 100%;
      height: fit-content;
    }
  }
  .footer-row {
    width: 100%;
    height: 64px;
    box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    box-sizing: border-box;
    .prev-link, .next-link {
      display: flex;
      align-items: center;
      cursor: pointer;
      .text {
        font-size: 14px;
        color: #1a1918;
      }
      .title {
        font-size: 14px;
        color: #565551;
      }
      .divider {
        width: 1px;
        height: 16px;
        background-color: #c5c3b9;
        margin: 0 8px;
      }
    }
  }
}
</style>
